<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>仿微信聊天</title>
    <link rel="stylesheet" href="css/zhal.css">
</head>

<body>
    <div class="max" id="app">
        <!-- 头部部分 -->
        <header class="hed">
            <span class="iconfont">&#xe603;</span>
            <h3>AI助手</h3>
            <span class="iconfont">&#xec1c;
            </span>
        </header>

        <!-- 主体部分 -->
        <ul class="vx_main">
            <li :class="item.cla" v-for="item in msg">
                <a href="JavaScript:;"><img :src="item.img" alt=""></a>
                <p>{{item.txt}}</p>
            </li>
            <!-- <li class="wite">
                <a href="JavaScript:;"><img src="images/dongm.webp" alt=""></a>
                <p>尽量明天发给我尽量明天发给我尽量明天发给我尽量明天发给我尽量明天发给我尽量明天发给我尽量明天发给我尽量明天发给我尽量明天发给我尽量明天发给我尽量明天发给我尽量明天发给我尽量明天发给我尽量明天发给我尽量明天发给我尽量明天发给我尽量明天发给我尽量明天发给我尽量明天发给我
                </p>
            </li> -->

            <!-- 
            <li class="gree">
                <a href="JavaScript:;"><img src="images/ma.webp" alt=""></a>
                <p>好的
                </p>
            </li>
            <li class="gree">
                <a href="JavaScript:;"><img src="images/ma.webp" alt=""></a>
                <p>明天发
                </p>
            </li> -->
        </ul>
        <!-- 底部 -->
        <footer class="vx_fs">
            <span class="iconfont">&#xe618;
            </span>
            <textarea v-model="bot"></textarea>
            <a href="JavaScript:;" class="fasong" @click="fn">发送</a>
        </footer>
    </div>
</body>

</html>
<!-- <script>
    //1.获取到发送按钮
    var fasong = document.querySelector('.fasong');
    //获取到ul
    var uls = document.querySelector('ul');
    var index = 0;
    fasong.onclick = function () {
        var val = document.querySelector('textarea').value;
        //document.querySelector('textarea').value = ''
        if (val == '' || val == null) {
            //放着不需要
        } else {
            index++;
            var lis = document.createElement('li');
            var li1 = document.createElement('li');
            li1.innerText = getTim();
            lis.setAttribute('id', 'aa' + index)
            lis.setAttribute('class', 'gree');
            var as = document.createElement('a');
            as.setAttribute('href', 'JavaScript:;');
            var imgs = document.createElement('img');
            imgs.src = 'images/ma.webp';
            var p1 = document.createElement('p');
            p1.innerText = val;
            as.appendChild(imgs);
            lis.appendChild(as);
            lis.appendChild(p1);
            uls.appendChild(li1);
            uls.appendChild(lis);
            this.setAttribute('href', '#aa' + index)
            // this.setAttribute('href', 'JavaScript:;')

        }

    }
    //
    function getTim() {
        var date = new Date();
        // var year = date.getFullYear();//年
        var month = date.getMonth() + 1;//月
        var r = date.getDate();//日
        var day = date.getDay();//星期
        var days = ''
        switch (day) {
            case 1:
                days = "星期一";
                break;
            case 2:
                days = "星期二"
                break;

            case 3:
                days = "星期三";
                break;

            case 4:
                days = "星期四";
                break;

            case 5:
                days = "星期五";
                break;

            case 6:
                days = "星期六";
                break;

            case 0:
                days = "星期天";
                break;

        }
        var hous = date.getHours();//小时
        var minutes = date.getMinutes();//分钟
        var seconds = date.getSeconds();//当前秒
        //获取div元素   

        var daytim = month + "月" + r + "日" + hous + ":" + minutes + ":" + seconds + " " + days;
        return daytim
    }

</script> -->
<script src="./vue2.js"></script>
<script src="./axios.js"></script>
<script>
    // 方法一

    // // 方法二 
    // let t = document.documentElement.scrollHeight;
    // window.scroll({ top: t, left: 0, behavior: 'smooth' });

    new Vue({
        el: '#app',
        data() {
            return {
                bot: '',
                sr: '',
                msg: [{
                    cla: 'wite',
                    img: 'images/dongm.webp',
                    txt: "你可以向我发起问题会话",

                }, {
                    cla: 'gree',
                    img: 'images/ma.webp',
                    txt: "比如：南昌天气怎么样",

                }],

            }
        },
        methods: {
            fn() {
                this.msg.push({
                    cla: 'gree',
                    img: 'images/ma.webp',
                    txt: this.bot,

                })

                // 获取token
                axios({
                    method: 'post',
                    url: 'http://127.0.0.1:3006/ai/bot',
                    data: {
                        msg: this.bot
                    }
                }).then(res => {
                    this.msg.push({
                        cla: 'wite',
                        img: 'images/dongm.webp',
                        txt: res.data.data.result,

                    })

                    console.log(res.data.data.result);
                    this.bot = ''
                })

            }
        }
    })
</script>